<template>
	<div class="writeform">
		<form class="form-cont" v-if="!userComponts">
			<div class="form-title clearFix">
				<p>基本信息</p>
			</div>
			<div class="form-basetop clearFix">
				<div class="form-half">
					<p>观察者：</p>
					<span>{{empName}}</span>
				</div>
				<div class="form-half">
					<p>部门：</p>
					<span>{{depName}}</span>
				</div>
			</div>

			<div class="form-baseinput">
				<!--<div class="form-group formline">
					<label>SOC日期：</label>
					<input type="date" name="observeTime" required tips="SOC日期" placeholder="SOC日期" class="form-control" v-model="list.observeTime">
				</div>-->

				<div ref="ipt"  tips="时间" isrequired="isrequired">
					<datetime title="SOC日期：" v-if="!stateX" v-model="list.observeTime" placeholder="SOC日期"  value-text-align="left"></datetime>
					<x-input v-if="stateX" title="SOC日期：" v-model="list.observeTime"  readonly></x-input>
				</div>
				<selector title="观察内容 :" @on-change="checkEmp" :options="typeName" v-model="list.observeContent"  >
				</selector>

				<!--<div class="form-group formline">
					<label>观察内容：</label>
					<select class="form-control" v-model="list.observeContent" @change="checkEmp($event)">
						<option v-for="item in siteMap" v-bind:value="item.typeKey">{{item.typeName}}</option>
					</select>
				</div>-->
				<div class="form-group" id="addaccident" @click="!stateX && userChoose()"  v-if="empShow">
					<label class="addalert" id="no_paddingLt" v-if="!$route.query.state || $route.query.state == '0'"><i class="ion ion-android-add fontcompany"></i>选择员工 </label>
					<span>已选择：{{observeName}}</span>
				</div>
	

			</div>
			

			<div class="form-textarea">
				<div class="form-title clearFix">
					<p>谈话内容</p>
				</div>
				<div class="form-group">
					<textarea name="title" rows="3" v-model="list.talkContent" required tips="谈话内容" class="form-control" placeholder="观察到了什么？说到了什么？有什么让您感到欣慰或担心的？(必填)"></textarea>
				</div>

				<div class="form-title clearFix">
					<p>表扬或改进的方案</p>
				</div>
				<div class="form-group">
					<textarea name="title" rows="3" v-model="list.praiseContent" required tips="表扬或改进的方案" class="form-control" placeholder="表扬理由或改进的方案（Who do what by when?）(必填)"></textarea>
				</div>
			</div>

			<div class="form-title clearFix">
				<p>图片</p>
			</div>
			<div class="form-group uploadimage" id="uploadimage">
				<ul>
					<li v-for="(img,index) in imgs">
						<img :src="img"  @click="previewImg(img)"/>
						<i class="ion ion-ios-close" v-if="$route.query.state != 1 && $route.query.state != 2" @click.stop.prevent="delImg(img,index)"></i>
					</li>
					<li>
						<a class="companypic" id="chooseImages" @click="getSig()" v-if="$route.query.state != 1 && $route.query.state != 2 && imgs.length < 6">
			        		<i class="ion ion-android-add fontcompany"></i>
			        		<!-- <span class="bluecolor block">点击上传照片</span> -->
			        	</a>
					</li>					
				</ul>
	        	
       		</div>
       		<div class="savebtn" v-if="$route.query.state != 1 && $route.query.state != 2">
	       		<button type="button" class="" @click="savenm(0)">保存</button>
	       		<button type="button" class="" @click="savenm(1)">保存并提交</button>
	   		</div>
		</form>
		<choose-userlist v-if="userComponts"></choose-userlist>
		<loading v-if="loadShow"></loading>
		<toast v-if="toastShow" :message="tipMessage"></toast>
		<transition name="slide">
	      <tips v-show="tipsShow" :tips="tipsMessage"></tips>
	    </transition>
	</div>
</template>

<script type="text/javascript">

	import {Datetime,Selector,XInput } from 'vux'

	import wx from 'weixin-js-sdk'

	import jssdk from '../../assets/js/jssdk/wxJSSDK'

	import safeUrl from '../../assets/js/insterface'

	import chooseUserlist from '../../components/safereport/userListSoc.vue'

	import vaild from '../../assets/js/vaild_form'

	import http from '../../assets/js/http_mixin'

	export default {
		data () {
			return {
				stateX:true,
				isSubmit:true,// 防止保存和提交短事件内触发多次
				empName:'',
				depName:'',
				tipMessage:'',
				userComponts:false,
				observeName:'',

				list:{
					id:'',
					depId:'',
					empNo:'',
					observeNo:'',
					observeTime:'',
					observeContent:'',
					talkContent:'',
					praiseContent:'',
					observeImg:'',
					state:0
				},

				empShow:true,

				siteMap:[],
				typeName: [],
				imgs:[],
				missImgs:[],
				idx:0,
				idx2:0
			}
		},
		mixins:[jssdk, http, vaild],
		components:{
			chooseUserlist,
			Datetime,
			Selector,
			XInput
		},
		mounted() {
			document.title="SOC";
			this.list.observeNo = this.$route.query.empNo;
			// this.list.observeNo = 'P0055882';
			this.selectData();
			this.init();
			this.stateX = this.$route.query.state ? true : false;
		},
		methods: {
			selectData() {
				this.$http.post(safeUrl.socSelectData,{observeNo:this.list.observeNo},{emulateJSON: true})
				.then((response) =>{
					if(response.data.evo){

						const dataevo = response.data.evo;
						const datamap = response.data.map;

						const d = new Date();
						var months = d.getMonth() + 1;
						var days =  d.getDate();
						if(months < 10){
							months = '0' + months;
						}
						if(days < 10){
							days = '0' + days;
						}
						this.list.observeTime = d.getFullYear()+"-"+months+"-"+days;
						// const d = new Date();
						// this.list.observeTime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();

						this.list.depId = dataevo.depId;
						this.list.observeContent = datamap.siteMap[0].typeKey;

						this.empName = dataevo.employeeName;
						this.depName = dataevo.depName;

						this.siteMap = datamap.siteMap;
						this.enterData();
						this.getTypeName();
					}
				})
				// .then(function(response){
				// 	console.log(response)
				// })
			},
			enterData() {
				if(this.$route.query.state){
					this.getData();
					var form = document.forms[0]; 
					for ( var i = 0; i < form.length; i++) { 
						var element = form.elements[i]; 
						element.disabled = true; 
					} 
				}else if(this.$route.query.state == 0){
					this.getData();
				}
			},
			getData() {
				this.$http.post(safeUrl.socDetail,{nId:this.$route.query.id},{emulateJSON: true})
				.then((response) =>{
					// debugger;
					// alert("empNo---------------"+response.data.empNo);
					this.list.id = response.data.id;
					this.empName = response.data.empName;
					this.depName = response.data.depName;
					this.observeName = response.data.observeName;
					this.list.empNo = response.data.empNo;
					this.list.depId = response.data.depId;
					this.list.observeTime = response.data.observeTime;
					this.list.observeContent = response.data.observeContent;

					// 人员默认展开
					for(var i=0; i<this.siteMap.length; i++){
						if(response.data.observeContent == this.siteMap[i].typeKey && this.siteMap[i].typeKey == "2"){
							this.empShow = true;
						}
					}

					this.list.talkContent = response.data.talkContent;
					this.list.praiseContent = response.data.praiseContent;
					if(response.data.observeImg != "" && response.data.observeImg != null){
						const imgArr = response.data.observeImg.split(",")
						for(var j=0; j<imgArr.length; j++){
							this.missImgs.push(imgArr[j]);
						}
						this.imgs = imgArr;
					}
					console.log(response.data)
				})
				// .then(function(response){
				// 	console.log(response)
				// })
			},
			checkEmp(e) {
				// debugger;
				
				for(var i=0; i<this.siteMap.length; i++){
					if(e == this.siteMap[i].typeKey && this.siteMap[i].typeKey == '2'){
						this.empShow = true;
						return ;
					}
					else{
						this.empShow = false;
					}
				}
				console.log(e)
			},
			userChoose() {
				this.userComponts = true;
			},
			getSig() {
				var vue = this;
				var chooseImageID = [];
				var imageId = document.getElementById('chooseImages');
				this.imageApi({
					chooseImage:{
						count:6 - vue.imgs.length,
						success:function(res){
							chooseImageID = res.localIds;
							if(chooseImageID[0].toString().indexOf("wxLocalResource") != -1){
								vue.getLocalImg(chooseImageID);    
							}else{
								for(var i=0; i<chooseImageID.length; i++){
									vue.imgs.push(chooseImageID[i]);
								}
							} 
							// vue.imglength = vue.imgs.length;
							vue.syncUpload(chooseImageID);
							console.log("gongsi------------" + chooseImageID);
						}
					}
				})
			},
			getLocalImg(eve){
		        var _this = this;
		        _this.imageApi({
					getLocalImgData:{
						localId: eve[_this.idx2].toString(),
						success: function (res) {
							_this.idx2++;
							_this.imgs.push(res.localData.toString());
							if (_this.idx2 < eve.length) {
								_this.getLocalImg(eve);   
							} else {
								_this.idx2 = 0;
							}
						}
					}
		        });    
		    },
			previewImg(img) {
				var vue = this;
				this.imageApi({
					previewImage:{
						current:img,
						urls:vue.imgs
					}
				})
			},
			syncUpload (localIds){
				var vue = this;
				this.imageApi({
					uploadImage:{
						localId:localIds[vue.idx].toString(),
						success:function(res){
							vue.idx++;
							vue.missImgs.push(res.serverId);
							if(vue.idx<localIds.length){
								vue.syncUpload(localIds);
							}else{
								vue.idx = 0;
							}
						}
					}
				})
			},
			savenm(e) {
				// debugger;
				var vue = this;
				if(e == "1"){
					var oInput = document.forms[0].elements;
			        if (!this.vaildForm(oInput)) {
			          return false
			        }
		        }
		        // debugger;
		        for(var i=0; i<this.siteMap.length; i++){
					if(this.list.observeContent == parseInt(this.siteMap[i].typeKey)){
						if(this.siteMap[i].typeName != '人员及培训'){
							this.list.empNo = "";
						}else{
							let _this = this;
							if(!this.list.empNo){
								this.tipsMessage = '请选择员工';
					            this.tipsShow = true;
					            window.setTimeout(function () {
					              /*两秒后，弹窗消失*/
					              _this.tipsShow = false;
					              _this.tipsMessage = '';
					            }, 2000);
					            return false;
							} 
						}
					}
				}
				this.list.state = e;
				this.list.observeImg = this.missImgs.join(",");
				//保存操作
				if(this.isSubmit){
					this.isSubmit = false;
					setTimeout(function (){
						this.isSubmit= true;
					},2000);
					this.getInfo({
						url:safeUrl.socSendData,
						param:this.list,
						success:function(response){
							vue.toastShow = true;
							vue.tipMessage = response.data.msg;
							vue.sendRemindng(this.list)
							
							console.log(response.data)
						},
						fail:function(response){

						}
					})
				}
			},
			sendRemindng() {
				let params = {
					empNum:this.$route.query.empNo,
					taskName:this.$route.query.typeName
				}
				const vue = this
				this.getInfo({
					url:safeUrl.taskReminding,
					param:params,
					success:function(response) {
						setTimeout(function(){
							vue.toastShow = false;
							window.history.go(-1);
						},1500);
					},
					fail:function() {
						setTimeout(function(){
							vue.toastShow = false;
							window.history.go(-1);
						},1500);
					}
				})
			},
			delImg(img,i) {
				this.missImgs.splice(i,1);
				this.imgs.splice(i,1);
			},
			getTypeName(){
				for (let i = 0; i<this.siteMap.length;i++){
					let obj = {};
					obj.value = this.siteMap[i].typeName;
					obj.key = this.siteMap[i].typeKey;
					this.typeName.push(obj);
				}
				console.log(this.siteMap)
				console.log(this.typeName);
			}
		}
	}
</script>
<style lang="scss" scoped>
	#no_paddingLt{
		padding-left:0px;
	}
</style>